<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>该二维码支持中文和LOGO</title>  
  
<script type="text/javascript" src="jquery-1.8.0.js"></script>  
<script type="text/javascript" src="utf.js"></script>  
<script type="text/javascript" src="jquery.qrcode.js"></script>  
<script type="text/javascript">  

        var imgURL = "";  
    function getPhoto(node) {  
        try{  
            var file = null;  
            if(node.files && node.files[0] ){  
                file = node.files[0];  
            }else if(node.files && node.files.item(0)) {  
                file = node.files.item(0);  
            }  
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
            try{  
                imgURL =  file.getAsDataURL();  
            }catch(e){  
                imgRUL = window.URL.createObjectURL(file);  
            }  
        }catch(e){  
            if (node.files && node.files[0]) {  
                var reader = new FileReader();  
                reader.onload = function (e) {  
                    imgURL = e.target.result;  
                };  
                reader.readAsDataURL(node.files[0]);  
            }  
        }  
        return imgURL;  
    } 

    $(document).ready(function() {  

        $("button").click(function(){
            if ($(".content").val() != "") {
                $("#qrcodeCanvas").qrcode({  
                    render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好  
                    text : $(".content").val(),    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接  
                    width : "200",               //二维码的宽度  
                    height : "200",              //二维码的高度  
                    background : "#ffffff",       //二维码的后景色  
                    foreground : "#000000",        //二维码的前景色  
                    src: imgRUL            //二维码中间的图片  
                });  
            }
        })
    });  
</script>  
  
</head>  
<body>  
    <center>  
      <h2>二维码</h2>  
      <div id="qrcodeCanvas" style="height:200px"></div>  
      内容<input type="text" class="content" /> 
      上传图片<input type="file" class="url" onchange="getPhoto(this)"/> 
      <button>生成</button>
    </center>  
</body> 